<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Runface动态精准护肤</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" type="text/css" href="css/registLogin/util.css"/>
		<link rel="stylesheet" href="css/loaders.css">
		<link rel="stylesheet" href="css/mui.css">
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<link rel="stylesheet" type="text/css" href="font_icon/iconfont.css"/>
		
		<style>
			html,
			body {background-color: #efeff4;}
			span.mui-icon {font-size: 14px;/*color: #007aff; margin-left: -15px; */padding-right: 10px;}
			.mui-off-canvas-left {color: #fff;}
			.title {margin: 35px 15px 10px;}
			.title+.content {margin: 10px 15px 35px;color: #bbb;text-indent: 1em;font-size: 14px;line-height: 24px;}
			input {color: #000;}
			.mui-bar{background-color: #ff8dae;}
			.mui-off-canvas-left, .mui-off-canvas-right{background: #FFFFFF;}
			.mui-table-view-inverted{background: #ffffff;}
			.mui-table-view-inverted .mui-table-view-cell:after{background-color: #a4b9fa;}
			.mui-table-view-inverted:before{background-color: #FFFFFF;}
			.mui-table-view-inverted:after{background-color: #FFFFFF;}
			.mui-table-view-cell{padding: 13px 15px;color: #595555;}
			.aye{color:#70b2f9;}
			.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable{background-color: #FFFFFF;}
			/* .mui-card{border-radius: 20px;} */
			/*.mui-scroll-wrapper{position: static;}
			.mui-scroll{position: static;}*/
			.mui-bar.mui-bar-tab{
				background-color: #ff8dae;
			}
			.mui-bar.mui-bar-tab .mui-tab-item.mui-active{
				color: #FFFFFF;
			}
			.rf-m-r-10{
				margin-right: 10px;
			}
			a{
				text-decoration:none; 
				color: #F0F0F0;
			}
			.mui-table-view-cell{
				padding: 6px 15px;
			}
			a:active{text-decoration:none;color: #F2F2F2;}
			li{
				list-style: none;
			}
			#mostlike .mui-table-view-cell{
				padding: 1px 1px;
				background-color: white
			}
		</style>
	</head>

	<body>
		<!-- 主页面内容容器 -->
		<div class="mui-content mui-scroll-wrapper" id="offCanvasContentScroll">
						<div class="mui-scroll">
							<!-- 主界面具体展示内容 -->
							<!-- 轮播图片 start-->
							<div id="slider" class="mui-slider" >
							  <div class="mui-slider-group mui-slider-loop">
								<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
								<div class="mui-slider-item mui-slider-item-duplicate">
								  <a href="#">
									<img src="images/640_p4.webp" style="height: 200px;">
								  </a>
								</div>
								<!-- 第一张 -->
								<div class="mui-slider-item">
								  <a href="#">
									<img src="images/640_p1.webp" style="height: 200px;">
								  </a>
								</div>
								<!-- 第二张 -->
								<div class="mui-slider-item">
								  <a href="#">
									<img src="images/640_p2.webp" style="height: 200px;">
								  </a>
								</div>
								<!-- 第三张 -->
								<div class="mui-slider-item">
								  <a href="#">
									<img src="images/img_of_runface.webp" style="height: 200px;">
								  </a>
								</div>
								<!-- 第四张 -->
								<div class="mui-slider-item">
								  <a href="#">
									<img src="images/640_p4.webp" style="height: 200px;">
								  </a>
								</div>
								<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
								<div class="mui-slider-item mui-slider-item-duplicate">
								  <a href="#">
									<img src="images/640_p1.webp" style="height: 200px;">
								  </a>
								</div>
							  </div>
							  <div class="mui-slider-indicator">
								<div class="mui-indicator mui-active"></div>
								<div class="mui-indicator"></div>
								<div class="mui-indicator"></div>
								<div class="mui-indicator"></div>
							  </div>
							</div>
							<!-- 轮播图片 end-->
							<!--广告-->
							<!-- <div class="guanggao" ><a href="#"><img src="images/guanggao.jpg" width="100%" alt="" /></a></div> -->
							<!-- 五宫格图标 start -->
							<div class="box-container">
								<div class="box-col" data-url="search.html">
									<span>
										<svg class="icon" aria-hidden="true" style="width: 2.25em;height: 2.25em;">
										  <use xlink:href="#icon-hufupin4"></use>
										</svg>
									</span>
									<p>查产品</p>
								</div>
								<div class="box-col" data-url="discover.html">
									<span>
										<svg class="icon" aria-hidden="true" style="padding-left: 3px;">
										  <use xlink:href="#icon-hufupin3"></use>
										</svg>
									</span>
									<p>护肤榜</p>
								</div>
								<div class="box-col" data-url="discover.html">
									<span>
										<svg class="icon" aria-hidden="true">
										  <use xlink:href="#icon-paihangbang"></use>
										</svg>
									</span>
									<p>肤质榜</p>
								</div>
								<div class="box-col" data-url="product-list.html">
									<span>
										<svg class="icon" aria-hidden="true" style="width: 2.25em;height: 2.25em;padding-top: 7px;">
										  <use xlink:href="#icon-huabanfuben"></use>
										</svg>
									</span>
									<p>活动促销</p>
								</div>
								<div class="box-col" data-url="category.html">
									<span>
										<a href="#">
											<svg class="icon" aria-hidden="true">
											  <use xlink:href="#icon-hufupin"></use>
											</svg>
										</a>
									</span>
									<p>新品榜</p>
								</div>
								
							</div>
							<!-- 五宫格图标 end -->
							<!-- 产品列表 start -->
							<div class="mui-row" id="product_list"><div  class="mui-pull-left">&nbsp;&nbsp;为你推荐</div><div class="mui-pull-right" id="moreProduct"><a href="#" >更多<span class="mui-icon mui-icon-arrowright"></span></a></div></div>
							<div class="mui-content">
								<div class="mui-row" id="mostlike">
									<div class="mui-col-xs-6">
										<li class="mui-table-view-cell">
											<div class="mui-card">
												<!--内容区-->
												<div class="mui-card-content">
													<img src="images/p01.jpg" alt="" style="width: 100%;">
													<div class="mui-card-content-inner">
														<p style="color: #333;" class="mui-ellipsis">植物酵素焕活紧致洁面乳</p>
														<p class="mui-ellipsis">氨基酸配方温和不刺激；细致柔滑泡沫，洁净毛孔，用后滑润不紧绷。</p>
													</div>
												</div>
												<!--页脚，放置补充信息或支持的操作-->
												<div class="mui-card-footer">
													<div>
														<p class="font-color-pink mui-pull-left">￥<label>50</label></p>
														
													</div>
													<div>
														<a class="mui-icon mui-action-menu iconfont icon-gouwuche mui-pull-right rf-m-r-10" href=""></a>
													</div>
												</div>
											</div>	
										</li>
									</div>
								
								<!--定义订单列表项的模板-->
								<script type="text/html" id="oList">
									<li class="mui-table-view-cell mui-media" data-id="{{orderNo}}">
										<a href="javascript:;">
											<img class="mui-media-object mui-pull-left" src="{{OrderImgUrl}}">
											<div class="mui-media-body">
												{{OrderTitle}}{{IsCommented}}{{orderNo}}
												<p class="mui-ellipsis">数量:&nbsp;{{OrderCount}}</p><span></span>
												<p class="mui-ellipsis">总价:&nbsp;￥{{payment}}</p><span></span>
											</div>
											{{if IsCommented}}
											<div class="comment_area">
												<a href="javascript:;">已评价</a>
											</div>
											{{else}}
											<div class="comment_area">
												<a href="javascript:;">待评价</a>
												<button class="comment">评价</button>
											</div>
											{{/if}}
										</a>
									</li>
								</script>
								
								
								<!--定义产品列表项的模板-->
								
									<div class="mui-col-xs-6">
										<li class="mui-table-view-cell">
											<div class="mui-card">
												<!--内容区-->
												<div class="mui-card-content">
													<img src="images/p06.jpg" alt="" style="width: 100%;">
													<div class="mui-card-content-inner">
														<p style="color: #333;">香妃润肤乳</p>
														<p class="mui-ellipsis">1、低营养 2、保湿补水 3、油份较少，水份较多</p>
													</div>
												</div>
												<!--页脚，放置补充信息或支持的操作-->
												<div class="mui-card-footer">
													<div>
														<p class="font-color-pink mui-pull-left">￥<label>46</label></p>
														
													</div>
													<div>
														<a class="mui-icon mui-action-menu iconfont icon-gouwuche mui-pull-right rf-m-r-10" href=""></a>
													</div>
												</div>
											</div>	
										</li>
									</div>
								</div>
							
							</div>
							<!-- 文章start -->
							<div class="mui-row" id="articleList"><div id="" class="mui-pull-left">&nbsp;&nbsp;热门点评</div><div class="mui-pull-right" id="moreArticle"><a href="#" >更多<span class="mui-icon mui-icon-arrowright"></span></a></div></div>
							<div class="mui-content" style="margin-top: 0px;" id="hotComment">
								<ul class="mui-table-view">
									<li class="mui-table-view-cell mui-media">
										<a href="javascript:;">
											<img class="mui-media-object mui-pull-left" src="images/huazhuang.png">
											<div class="mui-media-body p-t-10">
												你看你妆都花了，要我怎么记得？
												<p class="mui-ellipsi-2 p-t-6">早上刚美美地撸了一个好看的妆...</p>
											</div>
										</a>
									</li>
									<li class="mui-table-view-cell mui-media">
										<a href="javascript:;">
											<img class="mui-media-object mui-pull-left" src="images/facial01.jpg">
											<div class="mui-media-body p-t-10">
												关于敷面膜，95%的人都不了解的事……
												<p class="mui-ellipsi-2 p-t-6">没有什么肌肤问题，是敷一张面膜不能解决的，</p>
											</div>
										</a>
									</li>
									<li class="mui-table-view-cell mui-media">
										<a href="javascript:;">
											<img class="mui-media-object mui-pull-left" src="images/fangshai.png">
											<div class="mui-media-body p-t-10">
											    防晒学堂：防晒指数越高越好？
												<p class="mui-ellipsis p-t-6">SPF和PA都是很重要的防晒指标，但并不是意味着越高越好。</p>
											</div>
										</a>
									</li>
								</ul>
							</div>
					</div>
			   	 <div class="mui-off-canvas-backdrop"></div>
				</div>
			
		<!-- 脚本 -->
		<script src="js/mui.js"></script>
		<script src="js/app.js"></script>
		<script src="js/template-web.js"></script>
		<script src="font_icon/iconfont.js"></script>

		<script>
			mui.init();
			
			 //主界面和侧滑菜单界面均支持区域滚动；
			mui('#offCanvasContentScroll').scroll();
			// console.log("===============执行了");
			 //实现ios平台原生侧滑关闭页面；
			if (mui.os.plus && mui.os.ios) {
				mui.plusReady(function() { //5+ iOS暂时无法屏蔽popGesture时传递touch事件，故该demo直接屏蔽popGesture功能
					plus.webview.currentWebview().setStyle({
						'popGesture': 'none'
					});
				});
			}
			//界面所有a标签跳转指定href
			mui('body').on('tap','a',function(){
				document.location.href=this.href;
			});
			mui('#slider').on('tap','a',function(){
				console.log("tap事件触发！");
			});
			mui(".box-container").on('tap','.box-col',function(){
				console.log("点击了五宫格的内容");
				console.log('data-url===='+this.getAttribute('data-url'));
				app.open(this.getAttribute('data-url'),this.getAttribute('data-url'));
			});
			//获得slider插件对象
			var gallery = mui('.mui-slider');
			gallery.slider({
			  interval:1000//自动轮播周期，若为0则不自动播放，默认为0；
			});
			///退出关闭
			mui.oldback = mui.back;
				var clickNum = 0;
				mui.back = function(event){
				   clickNum++;
				   if(clickNum > 1){
				       plus.runtime.quit();
				   }else{
				       mui.toast("再按一次退出runface.");
				   }
				   setTimeout(function(){
				       clickNum = 0
				   },1000);
				        return false;
				};
		//刷新用户信息
		function refreshUserInfo() {
			var user = app.getUserGlobalInfo();
			console.log("refresh======="+JSON.stringify(user));
			
			if (user != null) {
				var faceImage = user.faceImage;
				var nickname = user.nickname;
				var username = user.username;
				
				var span_nickname = document.getElementById("span_nickname");
				var span_username = document.getElementById("span_username");
				
				span_username.innerHTML = username;
				
				if (app.isNotNull(faceImage)) {
					var img_my_face = document.getElementById("img_my_face");
					img_my_face.src = app.imgServerUrl + faceImage;
				}
			}
			
		}	

		function plusReady(){
			// 设置系统状态栏背景
			plus.navigator.setStatusBarBackground( "#ff8dae" );
			// 设置系统状态栏样式为浅色文字
			plus.navigator.setStatusBarStyle( "UIStatusBarStyleBlackOpaque" );
			// 获取当前的webview对象
			var indexWebview = plus.webview.currentWebview();
			indexWebview.addEventListener("show", function() {
				refreshUserInfo();
			});
			
			// 判断本地是否保存有user信息
			// var userInfo = app.getUserGlobalInfo();
			// if(userInfo!=null){
			// 	// 获得当前的webview，刷新当前用户信息
			// 	var loginInfo=document.getElementById("loginInfo");
			// 	var username=document.getElementById("username");
			// 	var detail=document.getElementById("detail");
			// 	username.innerHTML='welcome,'+userInfo.username;
			// 	// console.log(JSON.stringify(userInfo));
			// 	detail.style.display='block';
			// 	// console.log(detail.style.display);
			// }
			
			}
			if(window.plus){
				plusReady();
				}else{
				document.addEventListener("plusready",plusReady,false);
			};
		mui.plusReady(function(){
			// refreshUserInfo();
		})
		
		</script>
		
		
	</body>

</html>
